<template>
  <div>
    <!--工具类-->

    <Row style="text-align: left">
      <i-col span="24">
        <div>
          <div style="text-align: right;" class="order_btns">

            <Button type="primary" @click="showConfirmOrders" icon="md-checkmark" v-has=tRole.ORDER_1_111>订单确认</Button>
            <Button type="primary" @click="showPrepareModal" icon="ios-cart" v-has=tRole.ORDER_1_112>订单备货</Button>

          </div>
          <divider></divider>
          <div v-has=tRole.ORDER_1_101 class="y_query_right">
            <Input v-model.trim="params.orderSerialNumber" placeholder="订单流水号" clearable class="y_condition"></Input>
            <Input v-model.trim="params.userName" placeholder="请输入用户名" clearable class="y_condition"></Input>

            <Button type="primary" class="y_condition" icon="ios-search" @click="search">查询</Button>
          </div>
        </div>
      </i-col>
    </Row>


    <List style="border-top: 1px solid #e8eaec;border-bottom: 1px solid #e8eaec;margin-top: 1rem;margin-bottom: 1rem;">

      <ListItem style="display: flex;align-items: flex-start;margin-left: 1rem;">
        <ListSort sort-label="备货时间" :sort-by="params.orderBy" sort-value="o.chekout_time"
                  @change="orderSort"></ListSort>
      </ListItem>
      <template v-if="orderCuorierList.length == 0">
        <ListItem>
          <div style="width: 100%; text-align: center;">暂无数据</div>
        </ListItem>
      </template>
      <CheckboxGroup v-model="params.selectedOrderItems" @on-change="checkChange">
        <list-item class="list_item" v-for="(item,index) in orderCuorierList">
          <Checkbox v-model="isCheckedAllMessage" @on-change="handleCheckAll">全选</Checkbox>
          <ListItemMeta :title="'order#:'+item.serialNumber"/>

          <div class="address">
            <span></span>
            <a>拷贝</a>
          </div>
          <Row v-if="!isEmpty(item.note)" type="flex" justify="space-between">
            <i-col :xs="2" :sm="2" :md="1" style="padding:0.25rem 0;">
            </i-col>
            <i-col :xs="22" :sm="22" :md="23" align="left" style="padding:0.25rem 0;">
              <KeyValueView title="用户备注">{{ item.note }}</KeyValueView>
            </i-col>
          </Row>

          <Row v-if="!isEmpty(item.note)" type="flex" justify="space-between">
            <i-col :xs="2" :sm="2" :md="1" style="padding:0.25rem 0;">
            </i-col>
            <i-col :xs="22" :sm="22" :md="23" align="left" style="padding:0.25rem 0;">
              <KeyValueView title="运营备注">
                <a style="padding:6px;font-size:14px" >运营备注</a>
              </KeyValueView>
            </i-col>
          </Row>

          <list-item class="list_item" v-for="(orderItemCuorier,index) in item.orderItemCuorierList">

            <div style="width:100%;">
              <Row type="flex" justify="space-between" align="middle">
                <i-col :xs="2" :sm="2" :md="1" style="padding:0.25rem 0;">
                  <Checkbox :disabled="orderItemCuorier._disabled" :label="item" :value="index">{{ check }}</Checkbox>
                </i-col>
                <i-col :xs="22" :sm="22" :md="23" style="text-align: left;">
                  <div style="width:100%;padding:0.25rem 0;">
                    <KeyValueView>#{{ index + 1 }}</KeyValueView>
                    <img :src="orderItemCuorier.productImage" style="width:100px"/>
                    <KeyValueView title="状态">
                      {{ orderStateDict.find(i => i.value == orderItemCuorier.state) == null ? '' : orderStateDict.find(i => i.value == orderItemCuorier.state).name }}
                    </KeyValueView>
                  </div>
                  <div style="width:100%;padding:0.25rem 0;">
                    <KeyValueView title="备货时间">{{ $tiyBJTime(item.createtime) }}</KeyValueView>
                    <KeyValueView title="收货人信息">{{ $tiyBJTime(item.receiverInfo) }}</KeyValueView>
                  </div>
                </i-col>
              </Row>

            </div>


          </list-item>

        </list-item>
      </CheckboxGroup>
    </List>
    <div style="float: right;">
      <Page :total="tPage.total" :page-size="tPage.stepNumber" :current="tPage.currentPage" @on-change="changePage"
            @on-page-size-change="sizeChange" :page-size-opts="[40,60,80,120,240]"
            show-sizer show-elevator/>
    </div>

    <!-- 运营备注 -->
<!--    <Modal-->
<!--      v-model="status.modalInnerNote.isShow"-->
<!--      title="运营备注"-->
<!--      width="65"-->
<!--      :styles="{align:'center'}"-->
<!--      :scrollable=true>-->
<!--      <List v-if="tData.innerNoteList.length>0" border size="small">-->
<!--        <ListItem v-for="(item,index) in tData.innerNoteList">-->
<!--          <row style="width:100%;">-->
<!--            <i-col span="24">-->
<!--              <span style="font-weight: bold;">{{ index + 1 }}.</span><span> {{ item.content }}</span>-->
<!--              <span style="float:right"><tag color="red">{{ item.employeeName }}</tag> {{ $tiyBJTime(item.createtime) }}</span>-->
<!--            </i-col>-->
<!--          </row>-->

<!--        </ListItem>-->
<!--      </List>-->
<!--    </Modal>-->

    <!--确认弹出框-->
<!--    <Modal-->
<!--      v-model="status.modalConfirm.isShow"-->
<!--      :title="status.modalConfirm.title"-->
<!--      :isLoading="status.modalConfirm.isLoading"-->
<!--      @on-ok="status.modalConfirm.onOk()"-->
<!--    >-->
<!--      <br>-->
<!--      <p>{{ status.modalConfirm.content }}</p>-->
<!--      <br>-->
<!--    </Modal>-->
  </div>
</template>

<!--javascript 代码-->
<script>
import ICol from "../../../node_modules/view-design/src/components/grid/col";
import tiyData from "./js/list/order_cuorier_data"
import {
  init,
  webList,
} from "./js/list/order_cuorier_funs.js"
import Operation from "view-design/src/components/transfer/operation";
import KeyValueView from "../widgets/KeyValueView";
import {isEmpty} from "../js/commonUtils";
import ListSort from "../widgets/ListSort";


export default {
  components: {Operation, ICol, KeyValueView, ListSort},
  data() {
    return {
      tRole: {//权限
        ORDER_1_101: "ORDER-1-101",
        ORDER_1_102: "ORDER-1-102",
      },
      tPage: tiyData.tPage,
      status: tiyData.tStatus,
      //搜索条件
      params: tiyData.tParams,
      //字典 订单状态
      orderStateDict: this.$store.getters.dictionaries.orderStateDict,
      //字典 包裹状态
      packageStateDict: this.$store.getters.dictionaries.packageStateDict,
      //字典 订单子项状态
      orderItemStateDict: this.$store.getters.dictionaries.orderItemStateDict,
      //字典 快运公司
      deliverCompanyList: this.$store.getters.dictionaries.deliverCompanyList,
      //字典 配送方式
      postageMethodDict: this.$store.getters.dictionaries.postageMethodDict,
      yunPath: this.$store.getters.imgPrefix,
      tData: tiyData.tData,
      orderCuorierList: tiyData.tData.orderCuorierList,
      isCheckedAllMessage: false
    }
  },
  computed: {},
  methods: {
    checkChange() {
      let length = 0;
      this.orderCuorierList.forEach(item => {
        if (!item._disabled) {
          length++;
        }
      });
      if (this.params.selectedOrderItems.length == length) {
        this.isCheckedAllMessage = true;
      } else {
        this.isCheckedAllMessage = false;
      }
    },
    handleCheckAll() {
      let self = this;
      if (self.isCheckedAllMessage) {
        self.params.selectedOrderItems.splice(0, self.params.selectedOrderItems.length);
        for (let i = 0; i < self.orderCuorierList.length; i++) {
          if (!self.orderCuorierList[i]._disabled) {
            self.params.selectedOrderItems.push(self.orderCuorierList[i]);
          }
        }
      } else {
        self.params.selectedOrderItems.splice(0, self.params.selectedOrderItems.length);
      }
    },
    isEmpty(val) {
      return isEmpty(val);
    },
    search() {
      tiyData.tPage.currentPage = 1;
      webList(this, tiyData);
    },
    changePage(page) {
      tiyData.tPage.currentPage = page;
      webList(this, tiyData);
    },
    sizeChange(p) {
      tiyData.tPage.stepNumber = p;
      webList(this, tiyData);
    },

    orderSelectedChanged(selection) {
      tiyData.tParams.selectedOrderItems = selection;
    },

    checkSelectedOrderState(type) { //列表点击按钮前判断选中订单状态
      let ret = {"success": true};
      if (tiyData.tParams.selectedOrderItems.length <= 0) {
        ret.success = false;
        ret.error = "先选择订单！";
        return ret;
      }
      for (let i = 0; i < tiyData.tParams.selectedOrderItems.length; i++) {
        let order = tiyData.tParams.selectedOrderItems[i];
        switch (type) {
          case 1: //ems物流对接单、配货单
            if (order.state != 115 && order.state != 113 && order.state != 114) {
              ret.success = false;
              ret.error = "只能导出“确认收款”、“备货”和“出库”状态的订单！";
              return ret;
            }
            break;
          case 2: //订单确认
            if (order.state != 110 && order.state != 116) {
              ret.success = false;
              ret.error = "只能对“已支付”和“待确认”状态的订单执行确认操作！";
            }
            break;
          case 3: //订单备货
            if (order.state != 115) {
              ret.success = false;
              ret.error = "只能对“已确认”状态的订单执行备货操作！";
            }
            break;
          case 4: //订单出库
            if (order.state != 113) {
              ret.success = false;
              ret.error = "只能对“备货”状态的订单执行出库操作！";
            }
            break;
          case 5: //发货单
            if (order.state < 111 || order.state > 115) {
              ret.success = false;
              ret.error = "只能导出“确认收款”、“备货”、“出库”和“发货”状态的订单！";
              return ret;
            }
            break;
          case 6: //秒帐销售单
            if (order.state <= 110 || order.state == 116 || order.state == 120 || order.state == 121) {
              ret.success = false;
              ret.error = "不能导出款项未到账和已退款的订单！";
              return ret;
            }
            break;
          case 7: //跨境电商认证数据
            if (order.state != 100) {
              ret.success = false;
              ret.error = "不能导出款项未到账和已退款的订单！"
            }
            break;
          default :
            break;
        }
      }
      return ret;
    },

    orderSort(sortBy) {
      tiyData.tPage.total = 1;
      tiyData.tPage.startIndex = 0;
      tiyData.tPage.currentPage = 1;
      tiyData.tParams.orderBy = sortBy;
      webList(this, tiyData);
    },

    copyEmail(email) {
      let oInput = document.createElement('input');
      oInput.value = email;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = 'oInput';
      oInput.style.display = 'none';
      this.$Message.success('邮箱地址已复制');
    }
  },
  mounted() {
    init(this, tiyData);
  }
}
</script>

<!--css样式-->
<style scoped lang="less">
@import  (once,optional)  "../css/base.less";

.table_css {
  margin: 1rem 0px;
}

.modal_newuser_form {
  padding-left: 60px;
  padding-top: 30px;
  padding-bottom: 30px;
}

.modal_form_input {
  width: 140px;
  margin-right: 10px;

}

.order_product_div {
  margin-top: 1rem;

}

.order_product_row {
  background: #f3f3f6;
  padding: 1rem;
  border: .0625rem solid #dbdbdb;
  border-bottom-style: none;
}

.key {
  .tiy_key;
}

.order_btns {
  button {
    margin-bottom: 0.5rem;
  }
}

.confirm-dialog {
  z-index: 1001;
}

.list_item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.list_item:hover {
  background: @tiySectionColor;
}
</style>
